<template>
	<view class="content">
		<view class="_posi">
			<u-tabs :list="list" :is-scroll="false" v-model="current" @change="handTabchange" active-color="#23bbb3" font-size="28"></u-tabs>
		</view>
		
		<view class="p20">
			<template v-if="orderList.length > 0">
				<view class="list br12 mb30" v-for="(item,index) in orderList" :key="index"
					@click.stop="handViewInfo(item)">
					<view class="z-flex z-flex-align-c pl26 pr26 pt20 pb20">
						<u-icon name="order" color="#1abc9c" :size="30" class="u-icon-2"></u-icon>
						<text class="ml8 c-666">{{item.payOrderId}}</text>
						<view class="c-theme" style="margin-left: auto;">{{item.statusStr}}</view>
						<!-- <view class="fs24 c-999">{{item.payStatusStr}}</view> -->
					</view>
					<view class="_line"></view>
					<view class="p26 fs26 z-flex z-flex-align-c">
						<u-image :src="item.productCover" width="130" height="130" border-radius="6"></u-image>
						<view class="flex-1 z-flex z-flex-around ml20" style="flex-direction: column;height: 130rpx;">
							<view class="c-333"><text>{{item.productName}}</text></view>
							<view class=""><text class="c-red fs26">￥</text><text class="fs30 ml6 fwb c-red">{{item.amount}}</text></view>
							<view v-if="item.payTime" class="c-999"><text class="fs24">支付时间：</text><text class="fs26">{{item.payTime}}</text></view>
						</view>
<!-- 						<view v-if="item.status == 1" class="fs24 _status">
							去支付
						</view> -->
						<view v-if="[2,3].includes(item.status)" class="fs24 _status" @click.stop="handViewInfo(item)">
							去使用
						</view>
					</view>
				</view>
			</template>
		</view>
		<vempty type="data" v-if="datalen" title="暂无数据"></vempty>
		<!-- <view v-if="datalen" class="t-c fs24 c-999">— 没有更多啦 —</view> -->
	</view>
</template>

<script>
	import {
		orderListApi
	} from '@/api/order.js'
	export default {
		data() {
			return {
				list: [{
					name: '全部',
					id: 0
				},{
					name: '待支付',
					id: 1
				}, {
					name: '已支付',
					id: 2
				}, {
					name: '使用中',
					id: 3
				}, {
					name: '已完成',
					id: 4
				}],
				query: {
					status: 0,
					userId: uni.getStorageSync('userId')
				},
				current: 0,
				orderList: [],
				datalen: false,
				option: {}
			}
		},
		onLoad(option) {
			if(option){
				this.option = option
				this.current = option.id
				this.query.status = option.id
			}
		},
		onShow() {
			this.$nextTick(()=>{
				this.getOrderList()
			})
		},
		methods: {
			async getOrderList(){
				uni.showLoading({
					title: '数据加载中...'
				})
				const {code,data} = await orderListApi(this.query)
				uni.hideLoading()
				if(code != 0) return
				this.orderList = data.list
				this.datalen = data.count == 0
			},
			handTabchange(index) {
				this.query.status = index
				this.getOrderList()
			},
			handNavigate() {
				uni.$u.route({
					type: 'switchTab',
					url: 'pages/product/index'
				})
			},
			handViewInfo({id}){
				uni.$u.route({
					type: 'navigateTo',
					url: 'mapPages/order_detail/index',
					params: {
						id
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		._posi{
			position: sticky;
			top: 0;
			left: 0;
			z-index: 1;
		}
		.list {
			background-color: #FFFFFF;

			._line {
				border: 1rpx solid #F0F0F0;
			}
			
			._status{
				border: 0.5rpx solid $uni-color-theme;
				color: $uni-color-theme;
				border-radius: 40rpx;
				padding:8rpx 0;
				width: 110rpx;
				text-align: center;
			}

		}

		._btn {
			background-color: $uni-color-theme;
			padding: 12rpx 0;
			border-radius: 6rpx;
			width: 160rpx;
			margin: 0 auto;
			transform: translateY(-80rpx);
		}
	}
</style>
